<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :span="6">
        <el-row class="panel-group margin-right-20">
          <el-col class="card-panel-col">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-money">
                <svg-icon icon-class="money" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">今日销售总额(元)</div>
                <count-to :start-val="0" :end-val="orderStatistics.todaySalePrice" :duration="2600" class="card-panel-num" />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row class="panel-group margin-right-20">
          <el-col class="card-panel-col">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-shopping">
                <svg-icon icon-class="shopping" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">今日订单数(笔)</div>
                <count-to :start-val="0" :end-val="orderStatistics.todayTotal" :duration="3000" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row class="panel-group margin-right-20">
          <el-col class="card-panel-col">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-people">
                <svg-icon icon-class="peoples" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">今日注册会员(个)</div>
                <count-to :start-val="0" :end-val="userStatistics.today" :duration="3000" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row class="panel-group">
          <el-col class="card-panel-col">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-message">
                <svg-icon icon-class="message" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">今日评论数(条)</div>
                <count-to :start-val="0" :end-val="commentStatistics.today" :duration="3000" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="item">
          <div class="item-hd bg-success">
            <span class="circle bg-success">产品<em><count-to :start-val="0" :end-val="productStatistics.total" :duration="2600" /> 件</em></span>
          </div>
          <div class="item-bd">
            <ul>
              <li>
                <strong><a>上架产品数</a></strong><span>{{ productStatistics.onShelf }} 件</span>
              </li>
              <li>
                <strong><a>已下架产品数</a></strong><span>{{ productStatistics.offShelf }} 件</span>
              </li>
              <li>
                <strong><a>活动产品数</a></strong><span>{{ productStatistics.promote }} 件</span>
              </li>
              <li>
                <strong><a>评论未审核数</a></strong><span>{{ commentStatistics.wait }} 次</span>
              </li>
              <li>
                <strong><a>评论数</a></strong><span>{{ commentStatistics.comment }} 条</span>
              </li>
              <li>
                <strong><a>评论待回复数</a></strong><span>{{ commentStatistics.unReply }} 条</span>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="item">
          <div class="item-hd bg-warning">
            <span class="circle bg-warning">订单
              <em><count-to :start-val="0" :end-val="orderStatistics.total" :duration="2600" />笔</em>
            </span>
          </div>
          <div class="item-bd">
            <ul>
              <li>
                <strong><a>待发货订单</a></strong><span>{{ orderStatistics.unDeliver }} 笔</span>
              </li>
              <li>
                <strong><a>待支付订单</a></strong><span>{{ orderStatistics.unPay }} 笔</span>
              </li>
              <li>
                <strong><a>待收货订单</a></strong><span>{{ orderStatistics.unReceive }} 笔</span>
              </li>
              <li>
                <strong><a>已完成订单</a></strong><span>{{ orderStatistics.complete }} 笔</span>
              </li>
              <li>
                <strong><a>已关闭订单</a></strong><span>{{ orderStatistics.close }} 笔</span>
              </li>
              <li>
                <strong><a>已取消</a></strong><span>{{ orderStatistics.cancel }} 笔</span>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { ReportService } from '@/api/ReportService'

export default {
  name: 'Dashboard',
  components: { CountTo },
  data() {
    return {
      productStatistics: { total: 0, onShelf: 0, offShelf: 0, promote: 0 },
      orderStatistics: { todayTotal: 0, todaySalePrice: 0, total: 0, unDeliver: 0, cancel: 0, close: 0, complete: 0, unReceive: 0, unPay: 0 },
      commentStatistics: { today: 0, wait: 0, comment: 0, unReply: 0 },
      userStatistics: { today: 0 }
    }
  },
  created() {
    this.loadOrderStatistics()
    this.loadProductStatistics()
    this.loadUserStatistics()
    this.loadCommentStatistics()
  },
  methods: {
    loadOrderStatistics() {
      ReportService.orderStatistics().then(result => {
        this.orderStatistics = result
      })
    },
    loadProductStatistics() {
      ReportService.productStatistics().then(result => {
        this.productStatistics = result
      })
    },
    loadUserStatistics() {
      ReportService.userStatistics().then(result => {
        this.userStatistics = result
      })
    },
    loadCommentStatistics() {
      ReportService.commentStatistics().then(result => {
        this.commentStatistics = result
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.dashboard-container {padding: 30px;background-color: #f0f2f5;}
.panel-group {
  .card-panel-col {margin-bottom: 32px;}
  .card-panel {
    height: 108px;cursor: pointer;font-size: 12px;position: relative;overflow: hidden;color: #666;background: #fff;box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);border-color: rgba(0, 0, 0, 0.05);
    &:hover {
      .card-panel-icon-wrapper {color: #fff;}
      .icon-people {background: #40c9c6;}
      .icon-message {background: #36a3f7;}
      .icon-money {background: #f4516c;}
      .icon-shopping {background: #34bfa3;}
    }
    .icon-people {color: #40c9c6;}
    .icon-message {color: #36a3f7;}
    .icon-money {color: #f4516c;}
    .icon-shopping {color: #34bfa3;}
    .card-panel-icon-wrapper {float: left;margin: 14px 0 0 14px;padding: 16px;transition: all 0.38s ease-out;border-radius: 6px;}
    .card-panel-icon {float: left;font-size: 48px;}
    .card-panel-description {
      float: right;font-weight: bold;margin: 26px;margin-left: 0px;
      .card-panel-text {line-height: 18px;color: rgba(0, 0, 0, 0.45);font-size: 16px;margin-bottom: 12px;}
      .card-panel-num {font-size: 40px;color:#f50}
    }
  }
}
.bg-success{ background: #67C23A}
.bg-warning{ background: #E6A23C}
ul {padding: 0;margin: 0;}
.circle {width: 150px;height: 150px;display: block;border-radius: 80px;}
.circle em{font-style:normal}
.item-hd {height: 110px;}
.item-hd > span {position: relative;top: 35px;left: 50%;margin-left: -50px;color: rgb(255, 255, 255);text-align: center;font-size: 18px;line-height: 150px;border: 3px solid white;}
.item-bd {background: #E5FBF9;border: 1px solid #E4E4E4;border-top: 0;}
.item-bd ul {overflow: hidden;padding: 0px;}
.item-bd ul li:first-child {border-top: 0;}
.item-bd ul li {border-top: 1px solid #e4e4e4;width: 50%;float: left;list-style-type: none;height: 90px;color: #666;text-align: center;padding-top: 20px;}
.item-bd ul li strong {display: block;font-weight: 500;margin-bottom: 10px;}
.item-bd ul li strong a {color: #409EFF;}
.item-bd ul li span {color: #f50;}
</style>
